<template>
  <!-- 添加或修改岗位对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="cancel"
    :width="width"
    append-to-body
  >
    <FormConfigBox
      :config="{ rules, labelWidth }"
      ref="formConfigBox"
      class="form"
      v-if="visible"
      :options="options"
      v-model="form"
    >
      <solt name="component" />
    </FormConfigBox>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "Dialog",
  props: {
    submit: {
      type: Function,
      default: () => {},
    },
    cancel: {
      type: Function,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    title: {
      type: String,
      default: "操作",
    },
    options: {
      type: Array,
      default: () => {},
    },
    width: {
      type: String,
      default: "500px",
    },
    rules: {
      type: Object,
      default: () => {},
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {},
    };
  },

  watch: {
    formData: {
      handler() {
        console.log(this.formData);
        
        this.form = { ...this.formData };
      },
      deep: true,
    },
  },

  mounted() {},

  methods: {
    // 取消按钮
    onCancel() {
      this.$refs.formConfigBox.handleReset();
      this.cancel();
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.formConfigBox.handleSubmit((val) => {
        this.submit(val);
      });
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
::v-deep .form {
  .el-select,
  .el-date-editor,
  .el-input-number,
  .el-input-number--medium {
    width: 100%;
  }
}
</style>